import { DndContext } from '@dnd-kit/core';
import { Droppable } from './Droppable';
import { Draggable } from './Draggable';
import { useState, useRef } from 'react';
/**
 * @description: 组件拖动，位置记忆
 * @return {*}
 */
// 最后一次的位置，这里保存在组件外面，防止组件重新渲染时候清除
const prev = { x: 0, y: 0 }
function App() {
  const [isDropped, setIsDropped] = useState(false);
  // 变量，保存了组件<Draggable>Drag me</Draggable>，渲染直接{draggableMarkup}
  const draggableMarkup = (
    <Draggable prev={prev}>Drag me</Draggable>
  );
  return (
    <DndContext onDragEnd={handleDragEnd}>
      {draggableMarkup}
      <Droppable>
        {/* {isDropped ? draggableMarkup : 'Drop here'} */}
      </Droppable>
    </DndContext>
  );

  /**
   * @description: 给DndContext添加onDragEnd，然后内部所有的drag拖动松开之后都会触发这个事件
   * @param {*} event
   * @return {*}
   */
  function handleDragEnd(event) {
    // 如果没有放入到drop中，over为null，否则over为对象,id就是drop的id
    // event.delta还可以获取drag最后放下之后的位置(偏移)x y scaleX scaleY
    if (event.over && event.over.id === 'droppable') {
      setIsDropped(true);
    }

    prev.x = prev.x + event.delta.x
    prev.y = prev.y + event.delta.y

  }
}
export default App
